<template>
    <div>
        <el-form :model="user" :rules="rules" ref="ruleForm"  label-width="100px" class="demo-ruleForm" >
            <el-form-item class="myclass" label="物业" prop="deptId">
                <treeselect :options="optionsParent" :default-expand-level="1" @input="propertyChange"
                            :disable-branch-nodes="true" noChildrenText="没有子节点" noOptionsText="暂无选项"
                            noResultsText="没有发现结果" :value="value" placeholder="选择物业" v-model="user.deptId"/>
            </el-form-item>
            <el-form-item class="myclass" label="用户" prop="name">
                <el-input type="text" v-model="user.name" @focus="alertMemberDialog" placeholder="请选择用户"></el-input>
            </el-form-item>
            <el-form-item class="myclass" label="登录账号" prop="phone">
                <el-input v-model="user.phone" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="登录账号/电话"></el-input>
            </el-form-item>
            <el-form-item class="myclass" label="登录密码" prop="password">
                <el-input type="password" v-model="user.password" placeholder="登录密码" size="large"
                          required="true"></el-input>
            </el-form-item>
            <el-form-item class="myclass" label="小区" prop="houseList">
                <el-select v-model="user.houseList" placeholder="请选择小区" style="width:100%" multiple>
                    <el-option v-for="item in housingList" :value="item.id" :key="item.id"
                               :label="item.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item class="myclass" label="权限管理" prop="roleIdList">
                <Checkbox-group v-model="user.roleIdList">
                    <Checkbox v-for="item in roleList" :key="item.id" :label="item.id">{{item.roleDesc}}</Checkbox>
                </Checkbox-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="myBtnclass">
            <Button type="primary"  size="large" @click="handleSubmit('ruleForm')" :loading="formLoading">提交</Button>
        </div>
        <!--人员选择插件-->
        <MemberSelector :data-tree="treeList" mode="SingleMember" :data-member="nameList" ref="memberSelector"
                        @treenodeclick="treeNodeClick" @affirmative="confirmMember">
        </MemberSelector>
    </div>
</template>
<script>
    import Treeselect from "@riophae/vue-treeselect";
    import MemberSelector from "../../components/member-selector/selector"

    export default {
        components: {
            MemberSelector,
            Treeselect
        },
        data(){
            return{
                rules: {
                    deptId: [
                        {
                            required: true,
                            message: "请选择物业"
                        }
                    ],
                    name: [
                        {
                            required: true,
                            message: "姓名不能为空"
                        }
                    ],
                    password: [
                        {required: true, message: "密码不能为空"},
                        {min: 6, message: "最少6位密码"}
                    ],
                    roleIdList: [
                        {
                            required: true,
                            message: "请选择权限"
                        }
                    ],
                    phone: [
                        {required: true, message: "登录账号或电话不能为空"},
                        {min: 11, max: 11, message: "请输入11位手机号"}
                    ],
                    houseList: [
                        {
                            required: true,
                            message: "请选择管理小区"
                        }
                    ]
                },
                formLoading: false,
                user: {},
                roleList:[],
                optionsDepart: [],
                optionsParent: [],
                deptList: [],
                housingList: [],
                value: null,
                treeList:[],
                nameList:[],
            };
        },
        created:function () {
            this.loadDepart();
            this.getSysRoleList();
        },
        methods:{
            //保存
            handleSubmit(ruleForm) {
                this.$refs[ruleForm].validate(valid => {
                    if (valid) {
                        this.formLoading = true;
                        if (this.user.status) {
                            this.user.status = 1;
                        } else {
                            this.user.status = -1;
                        }
                        this.postRequest("/api/user/saveOrUpdate", this.user).then(res => {
                            if (res.code == 20000) {
                                this.formLoading = false;
                                this.formVisible = false;
                                this.$Message.success("保存成功");
                                this.user = {};
                                this.user.houseList = [];
                                this.user.roleIdList = [];
                            } else {
                                this.formLoading = false;
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    }
                });
            },
            //得到权限角色列表
            getSysRoleList() {
                this.postRequest("/api/sysRole/getSysRoleList").then(res => {
                    console.log(res)
                    if (res.code == 20000) {
                        this.roleList = res.data;
                    } else {
                        this.roleList = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //加载物业
            loadDepart() {
                this.postRequest("/api/user/treeList").then(res => {
                    if (res.code == 20000) {
                        this.optionsDepart = res.data;
                        this.optionsParent = res.data
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //选择物业
            propertyChange() {
                if (this.user.deptId) {
                    let params = {};
                    params.parentId = this.user.deptId;
                    this.postRequest("/api/user/housingByPorpertId", params).then(res => {
                        this.housingList = res.data;
                    });
                    this.treeData(this.user.deptId)
                }
            },
            //加载部门树
            treeData(companyId) {
                this.getRequest("/api/manageHR/getCompanyByPropertyId?id=" + companyId).then(res => {
                    console.log(res);
                    if (res.code == 20000) {
                        this.treeList = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //弹出部门人员选择框
            alertMemberDialog: function () {
                this.$refs.memberSelector.showDialog();
            },
            //部门点击选择
            treeNodeClick: function (data) {
                const params = {};
                params.pageNum = null;
                params.companyId = data.companyId;
                //与后台交换数据
                this.postRequest("/api/manageHR/getUserByCompany", params).then(res => {
                    if (res.code == 20000) {
                        const _this = this;
                        const tmpList = [];
                        res.data.forEach(function (c) {
                            const list = c;
                            list.label = (c.name);
                            tmpList.push(list);
                        });
                        this.nameList = tmpList;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //确认选择人员
            confirmMember(data) {
                this.user.wyUserId = data[0].id;
                this.user.name = data[0].name;
            },
        },
    }
</script>
<style>
    .myclass{
        width: 600px;
        margin-left: 30%;
    }
    .myBtnclass{
        margin-left: 50%;
    }
</style>
